<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>导航栏-水平</title>
    <style>
        *{
            font-family: "微软雅黑"
        }
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        ul.hori li{
            display: inline;
        }
        ul.hori li a {
            background: darkgray;            
            padding: 10px;
            color: white;
            text-decoration: none;
            width: 100px;           
        }
        
        /*ul.float{
            float: left;
        }*/
        ul.float li{
            float: left;
            margin: 5px 5px;
            /*height: 40px;*/
            /*outline: dotted;*/
            /*clear: both;*/
        }
        ul.float li a{
            display: block;
            background: dodgerblue;
            padding: 5px 7px;
            color: white;
            text-decoration: none;
            /*width: 100px;*/
            border-radius: 3px;
        }
        ul.float li a:hover{
            background: steelblue;
        }
        div.clear {
            clear: both;
        }
    </style>
</head>
<body>
    <h1>使用内联方式，大小不一</h1>
    <ul class="hori">
        <li><a href="">导航栏</a></li>
        <li><a href="">导航栏9u9</a></li>
        <li><a href="">导航栏9u9fsd</a></li>
        <li><a href="">导航栏9u9fdsfs</a></li>
        <li><a href="">导航栏9u9sfsd</a></li>
        <li><a href="">导航</a></li>
        <li><a href="">导航栏9u9</a></li>
    </ul>
    <h1>使用浮动</h1>
    <div>
        <ul class="float">
            <li><a href="">HOW GEE</a></li>
            <li><a href="">SOBER</a></li>
            <li><a href="">ZUTTER</a></li>
            <li><a href="">CAFE</a></li>
            <li><a href="">LOVE SONG</a></li>
            <li><a href="">HOW GEE</a></li>
            <li><a href="">SOBER</a></li>
            <li><a href="">ZUTTER</a></li>
            <li><a href="">CAFE</a></li>
            <li><a href="">LOVE SONG</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <h1 style="text-align: center;">尽量使用float</h1>
</body>
</html>